import {
  Image,
  StyleSheet,
  Text,
  View,
  Animated,
  TouchableOpacity,
  LayoutAnimation,
  Touchable,
} from 'react-native';
import React, {useEffect, useRef, useState} from 'react';
import {useisScroll} from '../../contexts/scrollContext';

const data = [
  {
    img: require('../../assets/images/icon_home.png'),
    name: '首页推荐',
  },
  {
    img: require('../../assets/images/icon_show.png'),
    name: '热门直播',
  },
  {
    img: require('../../assets/images/icon_gift.png'),
    name: '我的礼物',
  },
  {
    img: require('../../assets/images/icon_mine.png'),
    name: '个人信息',
  },
];
const activeRightWidth = 120;
const Item = function ({
  isScroll = false,
  data = {img: null, name: ''},
  cusStyles = {},
  itemIndex = -1,
  nowActiveIndex = -1,
  changeActiveIndex = function () {},
}) {
  // console.log('====================================');
  // console.log(isScroll, data, cusStyles, itemIndex);
  // console.log('====================================');

  const [isActive, setisActive] = useState(false);

  const rightWidth = useRef(new Animated.Value(0)).current;

  if (data.img == null) {
    data.img = require('../../assets/images/default_avatar.png');
  }
  if (data.name.trim() === '') {
    data.name = '暂无数据';
  }
  if (itemIndex < 0) {
    console.warn(' itemIndex 必须 大于 0，warning');
  }

  useEffect(() => {
    console.log('====================================');
    console.log(nowActiveIndex);
    console.log('====================================');
    if (itemIndex != nowActiveIndex) {
      setisActive(false);
    } else {
      setisActive(true);
    }
  }, [nowActiveIndex]);

  useEffect(() => {
    if (isActive) {
      Animated.spring(rightWidth, {
        toValue: activeRightWidth,
        useNativeDriver: false,
        // 第一组配置
        bounciness: 16,
        speed: 17,
      }).start();
    } else {
      Animated.timing(rightWidth, {
        toValue: 0,
        duration: 200,
        useNativeDriver: false,
      }).start();
    }
  }, [isActive]);
  /**
   * @description 点击
   */
  const onPress = function () {
    if (isScroll) return;
    changeActiveIndex(itemIndex);
    // LayoutAnimation.configureNext(
    //   {
    //     duration: 500,
    //     create: {type: 'linear', property: 'opacity', duration: 500},
    //     update: {type: 'spring', springDamping: 0.6},
    //     delete: {type: 'linear', property: 'opacity'},
    //   },
    //   () => {
    //     console.log('动画结束');
    //   },
    //   () => {
    //     console.log('动画异常');
    //   },
    // );

    setisActive(!isActive);
  };

  let styles = StyleSheet.create({
    container: {
      position: 'absolute',
      top: 20,
      left: 0,
      width: 'auto',
      height: 50,
      borderBottomEndRadius: 25,
      borderTopEndRadius: 25,
      backgroundColor: 'pink',
      opacity: 0.8,
    },
    content: {
      height: '100%',
      flexDirection: 'row',
      alignItems: 'center',
    },
    imgContent: {
      display: 'flex',
      flexDirection: 'row',
      alignItems: 'center',
      width: 60,
      height: '100%',
      justifyContent: 'center',
    },
    img: {
      tintColor: '#f9f9f990',
      width: 36,
      resizeMode: 'contain',
    },

    right: {
      display: 'flex',
      height: '100%',
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
      // width: 120,
      overflow: 'hidden',
    },
    rightText: {
      color: 'white',
      fontWeight: '600',
    },
    dot: {
      width: 10,
      height: 10,
      marginRight: 25,
      borderRadius: 6,
      backgroundColor: '#26cc3180',
    },
  });
  if (Object.keys(cusStyles).length > 0) {
    Object.keys(cusStyles).forEach((key, index) => {
      if (styles[key] != undefined) {
        styles[key] = {...styles[key], ...cusStyles[key]};
      } else {
        styles[key] = cusStyles[key];
      }
    });
  }

  return (
    <TouchableOpacity onPress={() => onPress()} style={styles.container}>
      <View style={styles.content}>
        <View style={styles.imgContent}>
          <Animated.Image style={[styles.img]} source={data.img} />
        </View>
        <Animated.View
          style={[
            styles.right,
            {
              width: rightWidth,
              opacity: isActive ? 1 : 0,
            },
          ]}>
          <Text style={styles.rightText}>{data.name}</Text>
          <View style={styles.dot} />
        </Animated.View>
      </View>
    </TouchableOpacity>
  );
};

const zuoye_animateShow9_13 = () => {
  const {isScroll} = useisScroll();
  const [ActiveIndex, setActiveIndex] = useState(0);

  useEffect(() => {
    return () => {};
  }, []);
  console.log(data, '---执行了', isScroll);

  return (
    <TouchableOpacity
      activeOpacity={1}
      style={styles.root}
      onPress={() => {
        console.log('---外面的touch--');

        setActiveIndex(-1);
      }}>
      <View style={{alignItems: 'center', flexDirection: 'column'}}>
        <Text style={{backgroundColor: 'green', color: 'white'}}>
          {ActiveIndex}
        </Text>
        <Text style={{backgroundColor: 'red', color: 'white'}}>
          {String(isScroll)}
        </Text>
      </View>

      {data.length > 0 &&
        data.map((item, index) => {
          return (
            <Item
              key={index}
              isScroll={isScroll}
              data={item}
              itemIndex={index}
              nowActiveIndex={ActiveIndex}
              changeActiveIndex={setActiveIndex}
              cusStyles={{container: {top: (20 + 50) * index}}}
            />
          );
        })}
    </TouchableOpacity>
  );
};

export default zuoye_animateShow9_13;

const styles = StyleSheet.create({
  root: {
    width: '100%',
    height: 300,
    backgroundColor: '#f1f1f1',
    borderWidth: 1,
    borderStyle: 'dashed',
    borderColor: 'pink',
    marginVertical: 10,
    borderRadius: 10,
  },
});
